.site-list {
  padding: 0;
  margin: 0;
  // display: none; Раскомментировать при реализации c JS и удалить display: block;
  display: block;
}

.site-list--open {
  display: block;
}

@media (min-width: $tablet-width) {
  .site-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
  }
}

.site-list__item {
  background-color: $light-grey-blue;
  list-style: none;
  box-shadow: 0 1px 0 0 rgba(1, 1, 1, 0.2), inset 0 1px 0 0 $white-20;
  text-align: center;
  border-bottom: 1px solid #678fa8;

  &:first-child {
    box-shadow: 0 1px 0 0 rgba(1, 1, 1, 0.2);
  }

  &:last-child {
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.2);
    border-bottom: none;
  }
}

@media (min-width: $tablet-width) {
  .site-list__item {
    width: 153px;
    background-color: $white;
    box-shadow: none;
    border: none;

    &:first-child {
      box-shadow: none;
    }

    &:last-child {
      box-shadow: none;
    }

    &:nth-child(2) {
      margin-right: auto;
    }

    &:nth-child(3) {
      margin-left: auto;
    }
  }
}

@media (min-width: $desktop-width) {
  .site-list__item {
    width: 239px;
  }
}

.site-list__link {
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  line-height: 2.22;
  color: $white;
  text-transform: uppercase;
  height: 100%;
  text-align: center;
  display: block;

  @include padding-tb-8;

  &:hover {
    background-color: #669ec0;
  }

  &:active {
    background-color: #5496bd;
    color: rgba(255, 255, 255, 0.3);
  }
}

@media (min-width: $tablet-width) {
  .site-list__link {
    color: $black-two;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.86;

    @include padding-tb-15;

    &:hover {
      background-color: transparent;
      color: $light-grey-blue;
    }

    &:active {
      background-color: transparent;
      color: $black-30;
    }

    &--active {
      color: #766357;

      &:hover {
        color: #604e43;
      }

      &:active {
        color: rgba(118, 99, 87, 0.3);
      }
    }
  }
}
